<!-- eslint-disable no-alert -->
<script lang="ts" setup>
import { Modal } from 'ant-design-vue';
import { useImgEventStore } from '@/store/modules/dcp/image_management/imgEvent';

const emit = defineEmits<{
  (e: 'sendData', data: string): void
}>();
const value1 = ref<string>('');
const fileData = ref<any[]>([]);
const imgEventStore = useImgEventStore();
const tempFileNames = ref<{ [key: string]: string }>({});
const record = ref<any>([]);
interface IsEditing {
  [key: string]: boolean
}
const isEditing = ref<IsEditing>({});
function emitData(item: string) {
  emit('sendData', item);
}

function editItem(item: any) {
  isEditing.value[item.id] = true;
  tempFileNames.value[item.id] = item.folderName;
  const foundItem = fileData.value.find(file => file.id === item.id);
  if (foundItem) {
    record.value = { ...foundItem };
  }
  else {
    console.error('Item not found in fileData:', item);
  }
}

async function saveEdit(item: any) {
  await imgEventStore.updateEventItem(item.id, value1.value);
  getData();
  cancelEdit(item);
}
function cancelEdit(item: any) {
  isEditing.value[item.id] = false;
  tempFileNames.value[item.id] = item.folderName;
}
async function deleteSingleRecord(item: any) {
  await imgEventStore.deleteEventItem(item.id);
  getData();
}

async function onDelete(record: any) {
  Modal.confirm({
    title: () => '确定要删除吗？',
    okText: () => '是的',
    okType: 'danger',
    cancelText: () => '取消',
    onOk() {
      deleteSingleRecord(record);
    },
  });
}
async function getData() {
  await imgEventStore.getEventList();
  fileData.value = imgEventStore.eventList;
}
defineExpose({
  getData,
});
onMounted(() => {
  getData();
});
</script>

<template>
  <div>
    <div>
      <a-list bordered :data-source="fileData">
        <template #renderItem="{ item }">
          <a-list-item class="file-item">
            <div class="file-name">
              <FolderOutlined style="margin-right: 1vw; font-size: 2vw; line-height: 3vw; color: #ffca28;" />
              <span v-if="!isEditing[item.id]" @click="emitData(item.folderName)">{{ item.folderName }}</span>
              <a-input v-else v-model:value="value1" />
            </div>
            <div v-if="item.folderName !== '无分配文件夹的文件'" class="file-actions">
              <a-button v-if="!isEditing[item.id]" type="link" @click="editItem(item)">
                编辑
              </a-button>
              <a-button v-if="!isEditing[item.id]" type="link" @click="onDelete(item)">
                删除
              </a-button>
              <a-button v-if="isEditing[item.id]" type="link" @click="saveEdit(item)">
                保存
              </a-button>
              <a-button v-if="isEditing[item.id]" type="link" @click="cancelEdit(item)">
                取消
              </a-button>
            </div>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.file-item {
  font-size: 1vw;

  div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2vw;
    line-height: 1.5vw;
    cursor: pointer;
  }
}

.file-item:hover {
  background-color: #d8eaf9;
}

.file-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.edit-delete-buttons,
.save-cancel-buttons {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.edit-button {
  margin-right: 0.667vw;
}

.delete-button {
  margin-left: 0.667vw;
}

.save-cancel-buttons {
  margin-left: auto;
}
</style>
